<template>
  <div class="setButton">
    <i @click='dialogFormVisibleAdd = true' class="iconfont icon-bianji1"></i>
    <!--<el-button  size="mini" type="text" @click="dialogFormVisibleAdd = true">编辑</el-button>-->
    <el-dialog :close-on-click-modal="false" @opened="$store.commit('dialogTop')"  title="编辑指标项"
               :visible.sync="dialogFormVisibleAdd" @close="resetForm('ruleFormAdd')" @open="dialogOpen">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="100px" class="demo-ruleForm">
        <el-form-item label="指标类别" prop="classifyId"
                      :rules="[{ 'required':true, 'message': '请输入指标类别', 'trigger': 'blur' }]">
          <el-select v-model="ruleFormAdd.classifyId" size="small" clearable placeholder="指标类别">
            <el-option
              v-for="item in classifyList"
              :key="item.classifyId"
              :label="item.classifyName"
              :value="item.classifyId">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="指标名称" prop="itemsName"
                      :rules="[{ 'required':true, 'message': '请输入指标名称', 'trigger': 'blur' }]">
          <el-input size="small" :maxlength="20" v-model="ruleFormAdd.itemsName"
                    placeholder="指标名称"></el-input>
        </el-form-item>

        <el-form-item label="指标描述" prop="itemsDesc"
                      :rules="[{ 'required':true, 'message': '请输入指标描述', 'trigger': 'blur' }]">
          <el-input
            type="textarea"
            :rows="3"
            :maxlength="1000"
            placeholder="指标描述"
            v-model="ruleFormAdd.itemsDesc">
          </el-input>

        </el-form-item>

        <el-form-item label="评分标准" prop="scoreRule" :rules="[{ 'required':true, 'message': '请输入评分标准', 'trigger': 'blur' }]">
          <el-input
            type="textarea"
            :rows="3"
            :maxlength="1000"
            placeholder="评分标准"
            v-model="ruleFormAdd.scoreRule">
          </el-input>

        </el-form-item>

        <el-form-item label="附件设置" prop="hasAttachment" :rules="[{ 'required':true, 'message': '请选择附件设置', 'trigger': 'blur' }]">
          <el-radio v-model="ruleFormAdd.hasAttachment" :label="1">上传附件</el-radio>
          <el-radio v-model="ruleFormAdd.hasAttachment" :label="0">无需附件</el-radio>
          <i v-show="$store.state.btnMenuIds.indexOf(76)>-1&&ruleFormAdd.hasAttachment==1" style=""  @click="$refs.uploadDialog.dialogFormVisibleAdd=true" class="iconfont icon-24"> </i>
        </el-form-item>
        <el-form-item label="责任部门" prop="checkItems" :rules="{required: true, message: '责任部门不能为空', }">
          <el-checkbox-group v-model="ruleFormAdd.checkItems" :min="1" >
            <el-row>
              <el-col :span="12"  v-for="(item,index) in options"  :key="index">
                <el-checkbox :label="item.value" >{{item.name}}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>

        </el-form-item>

        <div style="text-align: center;margin: 20px 0 10px 0 ;">
          <el-button type="primary" @click="submitForm('ruleFormAdd')">提交</el-button>
          <el-button size="small" @click="dialogFormVisibleAdd = false">取 消</el-button>
        </div>

      </el-form>

    </el-dialog>
    <uploadDialog ref="uploadDialog" :ruleFormAdd="ruleFormAdd"></uploadDialog>
  </div>
</template>

<script>
  import uploadDialog from "./uploadDialog.vue"
  export default {
    props: ["classifyList","editData"],
    data () {
      return {
        options: [
          {name:"市交通局",value:"hasRoadTransport"},
          {name:"市城管局",value:"hasCityManage"},
          {name:"市交警局",value:"hasTraffic"},
          {name:"各区政府",value:"hasAreaGov"},
          ],
        ruleFormAdd: {
          checkItems:["hasRoadTransport"],
          itemsName: "",
          classifyId: "",
          hasAttachment: "1",
          itemsDesc: "",
          scoreRule: "",
          hasRoadTransport: 0, hasTraffic: 0,hasCityManage: 0,hasAreaGov: 0
        },
        dialogFormVisibleAdd: false,
        rulesAdd: {

        }
      }
    },
    created(){

    },
    components: {uploadDialog},
    methods: {
      dialogOpen(){
        for(let j in this.editData){
          this.ruleFormAdd[j]=this.editData[j]
        }
        this.ruleFormAdd.checkItems=[]
        let obj={hasRoadTransport: 0, hasTraffic: 0,hasCityManage: 0,hasAreaGov: 0}
        for(let i in obj ){
          if(this.editData[i]){
            this.ruleFormAdd.checkItems.push(i)
          }
        }
      },
      //提交回调
      handleDiaSureAdd(){
        this.ruleFormAdd.hasRoadTransport=0
        this.ruleFormAdd.hasTraffic=0
        this.ruleFormAdd.hasCityManage=0
        this.ruleFormAdd.hasAreaGov=0
        this.ruleFormAdd.checkItems.forEach(item=>{
          this.ruleFormAdd[item]=1
        })
        this.axios.post(process.env.API_HOST + '/examine/updateItems',{...this.ruleFormAdd,checkItems:null})
          .then(response => {
            if (response.data.code == 200) {
              this.$message({
                type: 'success',
                message: '设置成功!'
              });
              this.dialogFormVisibleAdd = false
              this.$emit('getExamineInfo')
            }

          })
          .catch(error => {
            console.log(error);
          });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleDiaSureAdd()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .setButton
    display inline-block



</style>
